<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>登陆</title>
</head>

<body>
<style>
    body{
        background: #dcdcdc;
    }
    *{
        margin: 0px;
        padding: 0px;
    }
    .login{
        background: white;
        border-radius: 5px;
        width: 80%;
        margin: auto;margin-top: 30%;
        padding-bottom: 24px;
    }
    input{
        display: block;
        width: 80%;
        margin: auto;margin-top: 10px;
        height: 40px;
        text-align: center;
        border: #f5f5f5;
        border-radius: 3px;
        border-bottom: 1px solid #f5f5f5
    }
    .login p{
        text-align: center;
        padding-top: 12px;
        margin-bottom: 30px;
    }
    .submit{
        height: 40px;
        border-radius: 5px;
        background: #9bcee6;
        width: 60%;
        margin: auto;
        color: white;
        text-align: center;
        line-height: 40px;
        margin-top: 24px;
    }
    img{
        width: 45%;
        height: 40px;
        float: left;
        margin-top:12px;
    }
    .captcha{
        width: 80%;
        margin: auto;
        overflow: hidden;
    }
    .captcha input{
        float: left;
        margin-left: 5%;
        width: 50%;
    }
</style>
<div class="login">
    <p>星丝路</p>
    <input type="text" id="username" placeholder="账号">
    <input type="password" id="password" placeholder="密码">
    <div class="captcha">
        <img src="/api/auth/captcha?" alt="" >
        <input type="text" id="captcha" placeholder="验证码">
    </div>
    <div class="submit" onclick="logins()">登录</div>
</div>
<script src="./scripts/jquery-1.10.1.min.js"></script>
<script src="./scripts/jquery-md5.min.js"></script>
<script>

    function convertPassword(password) {
        var salt = "zhtframework_94DABGioQOq2tTUO0AXYow";
        return hex_md5(salt + password);
    }
    function logins(){
        $.ajax({
            url:"/api/auth/login",
            data:{
                "username": $("#username").val(),
                "password": convertPassword($("#password").val()),
                "captcha": $("#captcha").val(),
                "loginOrgin": "PC"
            },
            type:"post",
            success:function(s){
                if(s.statusCode == 200){
                    window.location = "/views/loan/operation.html"
                }else{
                    alert(s.message)
                }
            }
        })
    }
</script>
</body>

</html>
